<template>
  <div class="container">
    <div class="top">
      <el-carousel height="400px">
        <el-carousel-item v-for="item of ads" :key="item.id">
          <a :href="item.url" target="_blank"><el-image :src="item.pic" alt class="banner-img"></el-image></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="middle">
      <section class="section1">
        <h4>畅换单品</h4>
        <ul class="exchange-ul">
          <el-alert
            v-if="!exchangeList || !exchangeList.length"
            title="敬请期待"
            type="info"
            :closable="false"
            center
            show-icon></el-alert>
          <li v-for="item of exchangeList" :key="item.id" class="exchange-li">
            <ExchangeItem />
          </li>
        </ul>
      </section>
      <section class="section2">
        <h4>好货集新品</h4>
        <ul class="product-ul">
          <li v-for="item of productList" :key="item.id" class="product-li">
            <HotlistsItem :item="item"/>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>
<script>
  import { doHomeContent } from '@/apis/home';
  import { doList } from '@/apis/hotlists';
  import ExchangeItem from '@/components/exchange/Item.vue';
  import HotlistsItem from '@/components/hotlists/Item.vue';

  export default {
    name: 'HomeIndex',
    components: { ExchangeItem, HotlistsItem },
    data() {
      return {
        ads: [],
        productList: [],
        exchangeList: []
      };
    },
    methods: {
      async onRequest() {
        let res = await doHomeContent();
        const {
          newProductList = [],
          productList = [],
          advertiseList = []
        } = res.data;
        this.ads = advertiseList;
        if (!newProductList || newProductList.length === 0) {
          res = await doList(10, 1); // 主页只展示10个
          this.productList = res.data.list;
        } else {
          this.productList = newProductList; // 换的
        }
        this.exchangeList = productList;
      }
    },
    mounted() {
      this.onRequest();
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
@import "./styles/Index.scss";
</style>
